import React, { Component } from 'react';
import { good_list } from "../../api/home";
import { NavBar, SearchBar, TabBar,Ellipsis } from 'antd-mobile'
import "../../styles/allgood.scss";
class Allgood extends Component {
    constructor(props) {
        super(props)
        this.state = {
            goodList: [],
            tabs: [
                {title:"综合"},
                {title:"销量"},
                {title:"新品"},
                {title:"价格"},
                {title:"筛选"},
            ]
        }
    }
    back() {
         this.props.history.goBack()
     } 
    hanlclick(id) {
        console.log(id)
       this.props.history.push({pathname:'/detail', state:{goodid:id}})
    }
   async componentDidMount() {
       var res = await good_list({ id: this.props.location.state.id}) 
       console.log(res.data.list)
       this.setState({goodList:res.data.list})
    }
    render() {
        return (
            <div className='allgood'>
                <div className='navbar'>
                    <NavBar onBack={() => { this.back() }}>分类商品</NavBar>
                    </div>
                <SearchBar  placeholder='搜索店铺内商品' />
                <TabBar>
          {this.state.tabs.map((item,index)=> (
            <TabBar.Item key={index}  title={item.title} />
          ))}
        </TabBar>
                <ul className='goodlist1'>
                    {!this.state.goodList?<h2>没有更多了...</h2>:
                        this.state.goodList.map((item, index) => {
                            return (
                                <li className='gooditem' onClick={() => {this.hanlclick(item.id) }} key={index}>
                                <img src={item.pic} alt="" />
                                  <Ellipsis direction='end' rows={2} content={item.brandEN+item.name}/>
                                    <span className='span1'>满赠</span>
                                    <span>活动价 ￥{ item.salesPrice.value}</span>
                                </li>
                            )
                        })
                }
                </ul>
            </div>
        );
    }
}

export default Allgood;